<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-26 12:50:12
 *@描述:MDC大类超支分析
!-->
<template>
  <div class="page-tile-10">
    <div class="page-tile-10-left">
      <div class="mdc1">{{ mdc1 }}</div>
      <div class="page-tile-10-left-echarts-1" ref="pageTitle10TopEchartsRefs1"></div>
      <div class="mdc2">{{ mdc2 }}</div>
      <div class="page-tile-10-left-echarts-2" ref="pageTitle10TopEchartsRefs2"></div>
    </div>
    <div class="page-tile-10-right">
      <div class="mdc1">{{ mdc1 }}</div>
      <formList class="form-list-1" fontSizeTile="1rem" fontSizeContent="1rem" topHeightValue="20%" bottomHeightValue="80%" :formParameter.sync="formParameter1" :data_list.sync="data_list1" />
      <div class="mdc2">{{ mdc2 }}</div>
      <formList class="form-list-2" fontSizeTile="1rem" fontSizeContent="1rem" topHeightValue="20%" bottomHeightValue="80%" :formParameter.sync="formParameter2" :data_list.sync="data_list2" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import formList from '../components/formList/formList';

export default {
  // 组件名称
  name: 'pageTile10',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList,
  },
  // 组件状态值
  data() {
    return {
      //G消化
      data_list1: [],
      //F循环
      data_list2: [],
      mdc1: '',
      mdc2: '',
      //G消化
      formParameter1: [
        { width: '20%', title: '月份' },
        { width: '20%', title: '平均住院天数' },
        { width: '20%', title: '总病例数(例)' },
        { width: '20%', title: '均次费用(万元)' },
        { width: '20%', title: '总超支结余金额(万元)' },
      ],
      //F循环
      formParameter2: [
        { width: '20%', title: '月份' },
        { width: '20%', title: '平均住院天数' },
        { width: '20%', title: '总病例数(例)' },
        { width: '20%', title: '均次费用(万元)' },
        { width: '20%', title: '总超支结余金额(万元)' },
      ],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data) {
      this.mdc1 = data.mdc;
      this.mdc2 = data.mdc2;
      //G消化
      let data_list1 = data.data_list;
      //F循环
      let data_list2 = data.data_list2;
      //图表
      this.echartsInit1(data_list1);
      this.echartsInit2(data_list2);
    },
    //图表
    echartsInit1(data_list) {
      this.data_list1 = data_list;
      let myChart = echarts.init(this.$refs.pageTitle10TopEchartsRefs1);
      let option;
      option = {
        title: [
          {
            // top: -20,
            // left: '50%',
            // text: "结余金额和拨付比趋势"
          },
          {
            top: 20,
            left: 120,
            text: '结余金额(万元)',
            textStyle: {
              fontSize: 14,
              color: '#8e8e8e',
            },
          },
          {
            top: 20,
            right: 120,
            text: '均次费用(万元)',
            textStyle: {
              fontSize: 14,
              color: '#8e8e8e',
            },
          },
        ],
        legend: {
          show: true,
          textStyle: {
            fontSize: 18,
          },
          data: [
            {
              name: '总超支结余金额(万元)',
              itemStyle: {
                color: '#ee6666',
              },
            },
            {
              name: '均次费用(万元)',
              itemStyle: {
                color: '#ffc894',
              },
            },
          ],
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        yAxis: [
          {
            type: 'value',
            // min: -200, // 另一个 y 轴的最小值
            // max: 200, // 另一个 y 轴的最大值,
            axisLabel: {
              show: true,
              fontSize: 18,
              color: '#8e8e8e',
            },
          },
          {
            type: 'value',
            // min: -3, // 另一个 y 轴的最小值
            // max: 3, // 另一个 y 轴的最大值,
            axisLabel: {
              show: true,
              fontSize: 18,
              color: '#8e8e8e',
            },
          },
        ],
        series: [
          {
            name: '总超支结余金额(万元)',
            data: [],
            type: 'bar',
            barMaxWidth: 50,
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: function (params) {
                var colorStyle = params.value > 0 ? 'c' : 'd';
                return `{${colorStyle}|${params.value}}{${colorStyle}|万}`;
              },
              rich: {
                c: {
                  color: '#5470c6',
                  fontSize: 18,
                },
                d: {
                  color: '#ee6666',
                  fontSize: 18,
                },
              },
            },
            itemStyle: {
              color: function (params) {
                // 判断数据值是正数还是负数
                if (params.value >= 0) {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: ' #5470c6', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#5470c6', // 结束颜色
                      },
                    ],
                  }; // 正数的颜色为红色
                } else {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: '#ee6666', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#ee6666', // 结束颜色
                      },
                    ],
                  }; // 负数的颜色为绿色
                }
              },
            },
          },
          {
            name: '均次费用(万元)',
            data: [],
            type: 'line',
            yAxisIndex: 1,
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 3,
              formatter: '{c}万',
            },
            itemStyle: {
              color: '#ffc894',
            },
            lineStyle: {
              color: '#ffc894',
              width: 3, // 区块边线的粗细
            },
          },
        ],
      };
      data_list.forEach(item => {
        option.xAxis.data.push(item['月份']);
        option.series[0].data.push(item['总超支结余金额(万元)']);
        option.series[1].data.push(item['均次费用(万元)']);
      });
      option && myChart.setOption(option);
    }, //图表
    echartsInit2(data_list) {
      this.data_list2 = data_list;
      let myChart = echarts.init(this.$refs.pageTitle10TopEchartsRefs2);
      let option;
      option = {
        title: [
          {
            // top: 0,
            // left: 0,
            // text: "结余金额和拨付比趋势"
          },
          {
            top: 20,
            left: 120,
            text: '结余金额(万元)',
            textStyle: {
              fontSize: 14,
              color: '#8e8e8e',
            },
          },
          {
            top: 20,
            right: 120,
            text: '均次费用(万元)',
            textStyle: {
              fontSize: 14,
              color: '#8e8e8e',
            },
          },
        ],
        legend: {
          show: true,
          textStyle: {
            fontSize: 18,
          },
          data: [
            {
              name: '总超支结余金额(万元)',
              itemStyle: {
                color: '#ee6666',
              },
            },
            {
              name: '均次费用(万元)',
              itemStyle: {
                color: '#ffc894',
              },
            },
          ],
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e',
          },
        },
        yAxis: [
          {
            type: 'value',
            // min: -200, // 另一个 y 轴的最小值
            // max: 200, // 另一个 y 轴的最大值,
            axisLabel: {
              show: true,
              fontSize: 18,
              color: '#8e8e8e',
            },
          },
          {
            type: 'value',
            // min: -3, // 另一个 y 轴的最小值
            // max: 3, // 另一个 y 轴的最大值,
            axisLabel: {
              show: true,
              fontSize: 18,
              color: '#8e8e8e',
            },
          },
        ],
        series: [
          {
            name: '总超支结余金额(万元)',
            data: [],
            type: 'bar',
            barMaxWidth: 50,
            yAxisIndex: 0,
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: function (params) {
                var colorStyle = params.value > 0 ? 'c' : 'd';
                return `{${colorStyle}|${params.value}}{${colorStyle}|万}`;
              },
              rich: {
                c: {
                  color: '#5470c6',
                  fontSize: 18,
                },
                d: {
                  color: '#ee6666',
                  fontSize: 18,
                },
              },
            },
            itemStyle: {
              color: function (params) {
                // 判断数据值是正数还是负数
                if (params.value >= 0) {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: ' #5470c6', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#5470c6', // 结束颜色
                      },
                    ],
                  }; // 正数的颜色为红色
                } else {
                  return {
                    type: 'linear',
                    colorStops: [
                      {
                        offset: 0,
                        color: '#ee6666', // 开始颜色
                      },
                      {
                        offset: 1,
                        color: '#ee6666', // 结束颜色
                      },
                    ],
                  }; // 负数的颜色为绿色
                }
              },
            },
          },
          {
            name: '均次费用(万元)',
            data: [],
            type: 'line',
            yAxisIndex: 1,
            label: {
              show: true,
              fontSize: 18,
              textBorderWidth: 3,
              formatter: '{c}万',
            },
            itemStyle: {
              color: '#ffc894',
            },
            lineStyle: {
              color: '#ffc894',
              width: 3, // 区块边线的粗细
            },
          },
        ],
      };
      data_list.forEach(item => {
        option.xAxis.data.push(item['月份']);
        option.series[0].data.push(item['总超支结余金额(万元)']);
        option.series[1].data.push(item['均次费用(万元)']);
      });
      option && myChart.setOption(option);
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-tile-10 {
  display: flex;
  height: 100%;
  .page-tile-10-left {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 75%;
    height: 100%;
    .page-tile-10-left-echarts-1 {
      width: 100%;
      height: 45%;
    }
    .page-tile-10-left-echarts-2 {
      width: 100%;
      height: 45%;
    }
  }
  .page-tile-10-right {
    width: 25%;
    height: 90%;

    .form-list-1 {
      margin-bottom: 5%;
      height: 47.5%;
    }
    .form-list-2 {
      height: 47.5%;
    }
  }
  .mdc1 {
    margin: 5px auto;
    text-align: center;
    font-size: 1.5rem;
  }
  .mdc2 {
    margin: 5px auto;
    text-align: center;
    font-size: 1.5rem;
  }
}
</style>
